@import "@/common/constants/StyleConst.scss";

.tabs-container {
  width: 96%;
  margin: 0 auto;
  height: calc(100vh - 100px);

  .tabs {
    height: 40px;
    width: 346px; //由于tabs显示隐藏的bug，这里宽度必须写死
    border-radius: 8px;
    margin: 12px auto;

    .tab {
      width: 40%;
      font-size: $font-small;
      color: $color-theme-grey  !important;
      border-radius: 8px;
      margin: 2px;
      justify-content: left;
    }

    .tab-checked {
      width: 40%;
      font-size: $font-small;
      color: #ffffff !important;
      background-color: $color-theme-navy  !important;
      border-radius: 8px;
      margin: 2px;
      justify-content: left;
    }
  }

  .tabs-items {
    height: calc(100vh - 128px);
    overflow: hidden;
    background-color: $color-theme-navy;

    .v-window__container {
      background-color: $color-theme-navy;

      .v-window-item {
        text-align: left;

        .btn-checked {
          color: $color-text-white;
        }

        .btn::before {
          background-color: rgba(0, 0, 0, 0) !important;
        }

        .btn-unchecked {
          color: $color-theme-orange;
        }
      }

      .tabs-card {
        background-color: $color-theme-navy;
        border: none;
        box-shadow: none !important;
        margin: 0 auto;

        .subheader {
          background-color: $color-theme-lightblue;
          height: 24px;
          border-radius: 8px 8px 0 8px;
          margin: 4px auto;
        }

        .bg-subheader {
          background-color: $color-theme-lightblue;
          height: 24px;
          border-radius: 8px 8px 0 8px;
          margin: 4px auto;
          color: rgba(255, 255, 255, 0.7);
        }

        .list-item {
          cursor: pointer;
        }

        .list-item.bg-white {
          background-color: #ffffff;
          border-radius: 8px;
          border: solid 1px;
        }
      }
    }
  }
}